<template>
	<view class="coupon pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view class="header">
			<view class="back" @tap="back">
				<uni-icons type="back" size="25"></uni-icons>
			</view>
			<view class="title">
				{{$t('wallet.coupon.coupon.Mine')}}
			</view>
			<view class="rule" @click="go('/pages/shop/wallet/coupon/couponRule')">
				{{$t('wallet.coupon.coupon.Rule')}}
			</view>
		</view>
		<view class="container">
			<view class="nav_card">
				<view class="nav_card_item" v-for="item in navList" :key="item.id" @tap="changeNav(item.id)"
					:class="isActive==item.id?'active':''">
					{{item.name}}
				</view>
			</view>
			<view class="contant" v-if="couponList.length!=0">
				<view class="coupon_item" v-for="(item,index) in couponList" :key="item.id">
					<view class="coupon_content" :style="isActive==3?'background-color: #ABAABA;':''">
						<view class="coupon_info">
							<view>
								<text class="coupon_type">{{item.cate_name}}</text>
							</view>
							<view class="coupon_title">{{item.title}}</view>
							<view class="coupon_use">{{item.content}}</view>
							<view class="coupon_time">{{item.add_time}} - {{item.validity}}</view>
						</view>
						<view class="coupon_money">
							<view>
								<text>￥</text>
								<text>{{(item.money*1).toFixed(2)}}</text>
							</view>
							<view v-show="(item.con_money*1).toFixed(0)>0">{{item.name}}</view>
							<view @click="toGood(item)" v-show="isActive==1">{{$t('wallet.coupon.coupon.Use')}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no_list" v-else>
				<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/car.png" :text="$t('wallet.coupon.coupon.Text')">
				</u-empty>
			</view>
		</view>
		<view class="footer" @click="go('/pages/shop/wallet/coupon/collectCoupons')">
			<view>{{$t('wallet.coupon.coupon.gQuan')}}</view>
			<uni-icons type="forward"></uni-icons>
		</view>
	</view>
</template>

<script>
	import { couponLists } from '@/api/api.js'
	export default {
		data() {
			return {
				isActive: 1,
				navList: [{
					id: 1,
					name: this.$t('wallet.coupon.coupon.noUse')
				}, {
					id: 2,
					name: this.$t('wallet.coupon.coupon.haveUse')
				}, {
					id: 3,
					name: this.$t('wallet.coupon.coupon.hadUse')
				}],
				couponList: []
			}
		},
		onShow() {
			this.couponLists()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			changeNav(id) {
				this.isActive = id
				this.couponLists()
			},
			couponLists(){
				couponLists({
					token: uni.getStorageSync('token'),
					status: this.isActive
				}).then(res=>{
					this.couponList = res.data.data.data
					this.couponList.forEach(item=>{
						item.isShow = false
					})
				})
			},
			openDetail(item, index) {
				this.couponList[index].isShow = !this.couponList[index].isShow
				this.$forceUpdate() // 页面强制刷新
			},
			go(url){
				uni.navigateTo({
					url:url
				})
			},
			toGood(item){
				if(item.good_id!=0){
					uni.navigateTo({
						url: `/pages/shop/goodDetail/goodDetail?id=${item.good_id}`
					})
				}else{
					let arr = {first_id: item.first_id}
					uni.navigateTo({
						url:  `/pages/shop/index/search?idArr=${JSON.stringify(arr)}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			padding: 40rpx 34rpx;
			justify-content: center;
			algin-items: center;
			line-height: 60rpx;
			position: relative;

			.back {
				margin-left: 0;
				position: absolute;
				left: 40rpx;
			}

			.title {
				font-size: 36rpx;
			}

			.rule {
				margin-right: 0;
				font-size: 32rpx;
				position: absolute;
				right: 40rpx;
			}
		}

		.container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.nav_card {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				margin-bottom: 30rpx;

				.nav_card_item {
					flex: 1;
					text-align: center;
					color: #aaa;
					font-size: 28rpx;
				}

				.active {
					color: #1a2b3c;
					font-weight: 600;
				}
			}

			.contant {
				width: 100%;
				flex: 1;
				overflow: auto;
				background-color: #f5f5f9;
				padding: 40rpx 30rpx 0;

				.coupon_item {
					margin-bottom: 30rpx;

					.coupon_content {
						display: flex;
						width: 100%;
						height: 220rpx;
						background-color: #2a2c3c;
						color: #d1d2e1;
						border-radius: 6rpx;
						box-shadow: 0 2px 12px -2rpx #000;
						
						.coupon_info {
							flex: 1;
							border-right: 2rpx dashed #888;
							position: relative;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding-bottom: 20rpx;

							.coupon_type {
								background: #44455c;
								font-size: 24rpx;
								color: #00feff;
								line-height: 30rpx;
								text-align: center;
								padding: 10rpx;
							}

							.coupon_title {
								font-size: 28rpx;
								line-height: 28rpx;
								// margin-top: 30rpx;
								padding-left: 20rpx;
								font-weight: 600;
							}

							.coupon_time,
							.coupon_use {
								font-size: 20rpx;
								line-height: 20rpx;
								// margin-top: 30rpx;
								padding-left: 20rpx;
							}

							.coupon_txt {
								width: 100%;
								height: 40rpx;
								font-size: 20rpx;
								line-height: 40rpx;
								// margin-top: 20rpx;
								display: flex;
								justify-content: space-between;
								color: #8f919d;
								padding: 0 20rpx;
							}
						}

						.coupon_money {
							width: 200rpx;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							padding: 40rpx 0 30rpx;

							uni-view:nth-child(1) {
								color: #00feff;
								font-size: 48rpx;
								line-height: 48rpx;
								font-weight: 600;

								uni-text:nth-child(1) {
									font-size: 24rpx;
									line-height: 24rpx;
									padding-right: 6rpx;
								}
							}

							uni-view:nth-child(2) {
								font-size: 20rpx;
								line-height: 20rpx;
								margin: 20rpx 0;
							}

							uni-view:nth-child(3) {
								font-size: 28rpx;
								width: 134rpx;
								height: 44rpx;
								text-align: center;
								line-height: 40rpx;
								border: 2rpx solid #c3c4cb;
							}
						}
					}

					.coupon_rule {
						padding: 20rpx;
						background: #2b2c3c;
						color: #aaa;
						font-size: 24rpx;
						border-radius: 0 0 6rpx 6rpx;
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 120rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>